<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        .product{
            width: 800px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .product .product_title{
            overflow: hidden;
        }
        .product .product_title a{
            display: block;
            width: 90px;
            margin-right: 10px;
            height: 35px;
            background: purple;
            color: #fff;
            text-align: center;
            line-height: 35px;
            float: left;
            text-decoration: none;
        }
        .product .product_title a.active{
            background: red;
            color: #fff;
        }
        .product .product_list{
            height: 300px;
            width: 2400px;
            position: relative;
        }
        .product .product_list ul{
            overflow: hidden;
            padding: 10px 0;
            list-style-type: none;
            background: #ccc;
            float: left;
            position: absolute;
            left: 0;
            top: 0;
        }
        .product .product_list li{
            text-align: center;
            width: 180px;
            float: left;
            height: 280px;
            line-height: 280px;
           
            margin: 0 10px;
        }
        .product .product_list li img{
        	width: 180px;
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="product_title">
            <a class="active" href="#">照片</a>
            <a href="#">婚纱</a>
            <a href="#">动漫</a>
        </div>
        <div class="product_list">
            <ul>
                <li><img src="../../CeShi/img/1.gif"/></li>
                <li><img src="../../CeShi/img/2.gif"/></li>
                <li><img src="../../CeShi/img/3.gif"/></li>
                <li><img src="../../CeShi/img/4.gif"/></li>
                <li><img src="../../CeShi/img/5.gif"/></li>
                <li><img src="../../CeShi/img/6.gif"/></li>
                <li><img src="../../CeShi/img/7.gif"/></li>
                <li><img src="../../CeShi/img/8.gif"/></li>
                <li><img src="img/psb (1).jpg"/></li>
                <li><img src="img/psb (2).jpg"/></li>
                <li><img src="img/psb (3).jpg"/></li>
                <li><img src="img/psb (5).jpg"/></li>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        var _index = 0;
       var listWidth = $(".product .product_list").find("li").outerWidth(true) * 4;
        $(".product").find("a").click(function () {
            _index = $(this).index();
            $("a").eq(_index).addClass("active").siblings().removeClass("active");
            $(".product ul").stop().animate({
                left : -listWidth * _index
            },1000)
        })
    })
</script>